<html>
<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>

    <style>
        .btn {
            font-size: 12px;
        }

        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .select-editable {
            position: relative;
            background-color: white;
            border: solid grey 1px;
            width: 120px;
            height: 18px;
        }

        .select-editable select {
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 14px;
            border: none;
            width: 120px;
            margin: 0;
        }

        .select-editable input {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            padding: 1px;
            font-size: 12px;
            border: none;
        }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }

    </style>
</head>
<body>
<div class="container-fluid">

    <div id="toolbar">
        <div class="input-group" style="float: left; width: 200px; margin-right:15px;">
            <span class="input-group-addon">手机号码</span>
            <input type="text" class="form-control" id="phone">
        </div>
        <input type="hidden" id="memberId" value="">
        <div class="input-group" style="float: left; width: 240px; margin-right:20px;">
            <span class="input-group-addon">任务类型</span>
            <select id="category" class="form-control">
                <option value="">全部</option>

            </select>
        </div>
        <div class="input-group" style="float: left; width: 240px; margin-right:20px;">
            <span class="input-group-addon">状态</span>
            <select id="status" class="form-control">
                <option value="">全部</option>
                <#list Reply as re>
                    <option value="${re}" <#if re=='False'>selected</#if>>${re.title}</option>
                </#list>
            </select>
        </div>
        <div class="btn-group">
            <button id="search_btn" class="btn btn-info">查询</button>
        </div>
    </div>

    <table id="table"></table>
</div>
<div id="myModal" class="modal fade bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">回复</h4>
            </div>
            <div class="modal-body">
                回馈内容：<span id="content"></span>
                <div style="text-align:center; padding-top: 10px;">
                    <div class="col-md-12" id="imagesContainer">

                    </div>
                    <div class="col-md-12">
                        <input class="form-control" type="text" id="result" placeholder="Default input" value="">
                    </div>
                    <div style="clear:both;">
                        <br/>
                    </div>
                    <div class="modal-footer">
                        <button id="save_btn" type="button" class="btn btn-success">回复</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="${ctx}/js/extends.js"></script>
        <script>
            function openModal(feedbackId, content, picture, result) {
                $.ajax({
                    url: '/member/detail',
                    data: {
                        feedbackId: feedbackId
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        $("#imagesContainer").html("");
                        if (res.picture != "") {
                            var ay = res.picture.substr(0, res.picture.length - 1).split(',');
                            for (var i = 0; i < ay.length; i++) {
                                var div = $("<div>").addClass("col-md-4");
                                var img = $("<img>").attr("src", ay[i]).css({
                                    'width': '100%',
                                    'height': 'auto',
                                    'margin-bottom': '15px'
                                });
                                div.append(img);
                                $("#imagesContainer").append(div);
                            }
                        }
                    }
                });

                $('#content').text(content);
                $('#result').text(result);
                console.log(result);
                $("#save_btn").attr("data-id", feedbackId);
                $('#myModal').modal('show');
            }

            function queryParams(opt) {
                opt.userid = $("#userid").val();
                opt.modifyTime = $("#modifyTime").val();
                opt.picture = $("#picture").val();
                opt.content = $("#content").val();
                opt.result = $("#result").val();
                opt.phone = $("#phone").val();
                opt.status = $("#status").val();
                opt.userid = $("#userid").val();
                opt.feedbackaId = $("#feedbackId").val();
                opt.result = $("#result").val();
                return opt;
            };

            var table = null;

            $(function () {
                table = $('#table')
                //加载表格
                table.bootstrapTable({
                    url: '/member/getFeedbackList', //请求后台的URL（*）
                    method: 'post', //请求方式（*）
                    toolbar: '#toolbar', //工具按钮用哪个容器
                    striped: true,
                    dataType: "json",
                    pagination: true,
                    // "queryParamsType": "limit",
                    singleSelect: false,
                    contentType: "application/x-www-form-urlencoded",
                    pageSize: 50,
                    pageNumber: 1,
                    search: false, //不显示 搜索框
                    showColumns: false, //不显示下拉框（选择显示的列）
                    sidePagination: "server", //服务端请求
                    queryParams: queryParams,
                    //minimunCountColumns: 2,
                    pageList: [50, 100, 200, 500], //可供选择的每页的行数（*）
                    //queryParams : oTableInit.queryParams,//传递参数（*）
                    searchOnEnterKey: true,
                    // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    //showColumns: true, //是否显示所有的列
                    showRefresh: false, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    clickToSelect: false, //是否启用点击选中行
                    height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "orderId", //每一行的唯一标识，一般为主键列
                    // showToggle: true, //是否显示详细视图和列表视图的切换按钮
                    // cardView: false, //是否显示详细视图
                    // detailView: false, //是否显示父子表
                    // showExport: true, //是否显示导出
                    exportDataType: "selected", //basic', 'all', 'selected'
                    columns: [{
                        checkbox: true
                    }, {
                        title: 'ID',
                        width: '50px',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'phone',
                        title: '手机号',
                        width: '85px'
                    }, {
                        field: 'appStore',
                        title: '渠道',
                        width: '85px'
                    }, {
                        field: 'content',
                        title: '反馈内容',
                        width: '300px',formatter: function (value, row, index) {
                            var strN=row.content;
                            if(strN.length>=50){
                                var strN=strN.substring(0,50);
                                strN+="...";
                            }
                            return "<p title='"+row.content+"'>"+strN+"</p>";
                        }
                    }, {
                        field: 'picture',
                        title: '图片',
                        formatter: function (value, row, index) {
                            if (value == "") {
                                return "";
                            }
                            var ay = value.substr(0, value.length - 1).split(',');
                            //console.log(ay);
                            var src = "";
                            for (var i = 0; i < ay.length; i++) {
                                src += "<img style='width: 24%; height: auto; margin-right: 1%; border: 1px solid #ccc; '  src='" + ay[i] + "' />";
                            }
                            return src;
                        }
                    }, {
                        field: 'result',
                        title: '回复内容'
                    }, {
                        field: 'createTime',
                        title: '提交时间',
                        width: '120px',
                        formatter: function (value, row, index) {
                            return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                        }
                    }, {
                        field: 'modifyTime',
                        title: '回复时间',
                        width: '120px',
                        formatter: function (value, row, index) {
                            return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                        }
                    }, {
                        field: 'ipAddr',
                        title: 'ip',
                        width: '100px'
                    }, {
                        field: 'status',
                        title: '操作',
                        width: '65px',
                        formatter: function (value, row, index) {
                            console.log(row.content.replace(/[\r\n]/g, ""));
                            var btns = '<a  href="javascript:void(0);" onClick="openModal(\'' + row.feedbackId + '\',\'' + row.content.replace(/[\r\n]/g, "") + '\',\'' + row.picture + '\',\'' + row.result + '\')">回复</a>';
                            return btns;
                        }
                    }],
                    responseHandler: function (res) {
                        return {
                            "total": res.total, //总页数
                            "rows": res.rows //数据
                        };
                    },
                });

                // 查询
                $("#search_btn").click(function () {
                    table.bootstrapTable('refreshOptions', {pageNumber: 1});
                });
                $("#save_btn").click(function () {
                    var feedbackId = $(this).attr("data-id");
                    if (confirm("回复消息？")) {
                        $.post("/member/reply", {
                            feedbackId: feedbackId,
                            result: $("#result").val()
                        }, function (res) {
                            $('#myModal').modal('hide');
                            table.bootstrapTable('refresh');
                            alert(res);
                        });
                    }

                });
            });

        </script>
</body>
</html>